
.dd{
    width: 50%;
	position: absolute;
	left: 25%;
	top: 240px;
    /* background-color: saddlebrown; */
    text-align: center;
 
}
.input-box {
    position: relative;
    display: inline-block;

}
.input {
    /* padding: 0 40px 0 20px; */
    /* width: 260px; */
    height: 50px;
    font-size: 14px;
    border: 1px solid #eee;
    border-radius: 40px;
    background: #eee;
    transition: width .5s;
    transition-delay: .1s;
    opacity: 0.3;
    left: 60%;
    padding: 0 20px; /* 调整填充 */
    width: 260px; /* 初始宽度 */
    /* 其他已有样式保持不变 */

    /* 新增双向展开的样式 */
    transition: width 0.5s ease-in-out, padding 0.25s ease-in-out; /* 在过渡效果中包含填充属性 */
    box-sizing: border-box; /* 确保填充不影响宽度 */
    text-align: center; /* 让输入内容居中显示 */
}
/* 搜的按钮 */
.span {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    color: #969696;
    text-align: center;
    background: #222;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
   
   
}
/* 伸长 */
.input:focus {
 
    /* width: 580px; */
    outline: none;
    box-shadow: none;
    opacity: 0.8;
    width: 520px; /* 将初始宽度加倍，实现两边等宽展开 */
    padding: 0 130px; /* 将填充设置为扩展后宽度的一半 */
    /* 其他已有样式保持不变 */
}
.input:focus+.span {
    background-color: #2ad2c9;
    color: #fff;
    
}